import React,{Component}   from 'react';

// React 插槽（Portals）是一种将子组件的渲染输出到父组件之外的 DOM 节点中的技术。
// 这通常用于创建浮动对话框、提示框或者组件树之外的自定义渲染。

class App extends Component {
  render() {
    return (
      <div>
        <Swiper>
          <div>111111</div>
          <div>222222</div>
          <div>333333</div>
        </Swiper>
        <Swiper>
          {/* <div><img/>111111</div>
                    <div><img/>222222</div>
                    <div><img/>333333</div> */}
        </Swiper>
        <Swiper>
          {/* <img/>
                    <img/>
                    <img/> */}
        </Swiper>

        <Child>
          <div>11111111</div>
          <div>22222222</div>
          <div>33333333</div>
          {
            // children
          }
        </Child>
      </div>
    );
  }
}


class Child extends Component {
  render() {
    return (
      <div>
        child
        {/* 插槽 vue slot,具名插槽 */}
        {this.props.children[2]}
        {this.props.children[1]}
        {this.props.children[0]}
      </div>
    );
  }
}

class Swiper extends Component {
  render() {
    return <div>{this.props.children}</div>;
  }
}


export default App;